{% extends "seal/sealindex.html" %}

{% block detail %}

<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>

{#内容#}
<div class="row">
    <div class="col-lg-4">
        <div class="panel panel-danger" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
            <div class="panel-heading">各公司考勤信息汇总</div>
            <div class="panel-body" style="overflow:scroll;height: 660px;">
                <row class="data-table">
                    <table class="table table-bordered table-hover">
                        <tr>

                            <th class="warning">用印部门</th>
                            <th class="info">合同数</th>
                            <th class="info">合同份数</th>
                            <th class="success">文件数</th>
                            <th class="success">文件分数</th>
                        </tr>

                        {% for item in value %}
                        <tr>

                            <th>{{ item.department1 }}</th>
                            <th>{{ item.type_x }}套</th>
                            <th>{{ item.num_x }}份</th>
                            <th>{{ item.type_y }}套</th>
                            <th>{{ item.num_y }}份</th>


                        </tr>
                        {% endfor %}


                    </table>
                </row>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-danger" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
                    <div class="panel-heading">各公司盖章分数统计</div>
                    <div class="panel-body" style="height: 300px;">
                        <div id="seal_ht_bar" style="width:100%; height:280px;">

                            <script>
                                $(function () {
                                        var hoststr = window.location.host
                                        var chart = echarts.init(document.getElementById('seal_ht_bar'), 'white', {renderer: 'canvas'});
                                        var url = "http://" + hoststr + "/seal/api_seal_ht_bar?date=" + "{{ datestr }}";
                                        $.ajax({
                                            type: "GET",
                                            url: url,
                                            dataType: 'json',
                                            success: function (result) {
                                                chart.setOption(result);
                                            }
                                        });
                                    }
                                )
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4">
                <div class="panel panel-danger" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
                    <div class="panel-heading">用印类型比例</div>
                    <div class="panel-body" style="height: 300px;">
                        <div id="seal_ht_pie" style="width:110%; height:280px;">

                            <script>
                                $(function () {
                                        var hoststr = window.location.host
                                        var chart = echarts.init(document.getElementById('seal_ht_pie'), 'white', {renderer: 'canvas'});
                                        var url = "http://" + hoststr + "/seal/api_seal_ht_pie?date=" + "{{ datestr }}";
                                        $.ajax({
                                            type: "GET",
                                            url: url,
                                            dataType: 'json',
                                            success: function (result) {
                                                chart.setOption(result);
                                            }
                                        });
                                    }
                                )
                            </script>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="panel panel-danger" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
                    <div class="panel-body" style="height: 340px;">
                        <div id="seal_ht_wc" style="width:100%; height:340px;">

                            <script>
                                $(function () {
                                        var hoststr = window.location.host
                                        var chart = echarts.init(document.getElementById('seal_ht_wc'), 'white', {renderer: 'canvas'});
                                        var url = "http://" + hoststr + "/seal/api_seal_ht_wc?date=" + "{{ datestr }}";
                                        $.ajax({
                                            type: "GET",
                                            url: url,
                                            dataType: 'json',
                                            success: function (result) {
                                                chart.setOption(result);
                                            }
                                        });
                                    }
                                )
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}